使用 JavaScript 将类添加到父元素 – 码微 |
您所在的位置：网站首页 › js 元素添加类 › 使用 JavaScript 将类添加到父元素 – 码微 |
|
使用 JavaScript 将类添加到父元素
Add class to a parent Element using JavaScript
将类添加到父元素： 选择子元素。 使用该parentElement属性获取对父节点的访问权限。 调用classList.add()父类的方法，将类名作为参数传递给它。以下是本文示例的 HTML。 索引.html DOCTYPE html> .yellow-bg { background-color: yellow; } Child 1这是相关的 JavaScript 代码。 索引.js const child = document.getElementById('child'); child.parentElement.classList.add('yellow-bg');我们使用节点上的 parentElement 属性来访问其父节点。 下一步是使用 classList.add 方法向父级添加一个类。 您可以根据需要将尽可能多的类传递给该add()方法。 索引.js const child = document.getElementById('child'); child.parentElement.classList.add( 'yellow-bg', 'second-class', 'third-class' ); 如果一个类已经存在于节点上，该add()方法将忽略特定的类。同样，如果需要从父类中删除一个或多个类，请使用 remove()方法。 索引.js child.parentElement.classList.add( 'yellow-bg', 'second-class', 'third-class' ); child.parentElement.classList.remove( 'yellow-bg', 'second-class' );如果您需要将一个类添加到不是该节点的直接父级的元素，请使用 closest() 方法来选择该元素。 该closest()方法遍历Element及其父节点，直到找到与提供的选择器匹配的节点。假设我们需要在这个例子中选择divwith idof 。parent-1 索引.html DOCTYPE html> .yellow-bg { background-color: yellow; } Child 1下面是我们如何div使用 JavaScript 向元素添加类。 索引.js const child = document.getElementById('child'); child.closest('#parent-1').classList.add('yellow-bg'); 我们使用closest方法而不是属性，因为我们试图将类添加到不是直接父元素的元素。 parentElement如果元素本身与选择器匹配，则返回该元素。 如果不存在与提供的选择器匹配的元素，则该closest()方法返回null。 该方法采用包含选择器的字符串。提供的选择器可以根据需要指定。 索引.js const child = document.getElementById('child'); child.closest('body > div#parent-1').classList.add('yellow-bg');我们使用该closest()方法选择div带有idof 的元素parent-1，该body元素作为其父元素。 如果向该closest() 方法提供了无效的选择器字符串，SyntaxError则抛出一个。 进一步阅读 使用 JavaScript 检查 Parent 是否有特定的类 使用 JavaScript 按类获取最近的父元素 使用 JavaScript 删除节点的父元素 使用 JavaScript 通过标签获取最近的父元素 使用JS删除父元素而不删除子元素 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |